import { useEffect, useRef } from 'react';
import { initHelper, removeNode, throttle } from '../DragList/util';

const useDrag = (id, { onDragOver, onDrag, onDragEnd, onDragEnter, onDragOut }) => {
  const listRef = useRef(null);
  const cloneNodeRef = useRef(null);
  const pos = useRef({});
  const moveCurrent = useRef(null);
  const isEnter = useRef(false);
  const postData = useRef({});
  useEffect(() => {
    listRef.current = document.getElementById(id);
  }, [id]);
  const mousedownListener = (e) => {
    e.stopPropagation();
    e.preventDefault();

    pos.current = { x: e.pageX, y: e.pageY };

    if (e?.target?.parentElement && e?.target?.parentElement?.dataset?.id) {
      moveCurrent.current = e?.target?.parentElement;
    }
  };

  const mousemoveListener = (e) => {
    if (!moveCurrent?.current) return;
    if (!cloneNodeRef?.current) {
      const cloneNode = moveCurrent?.current.cloneNode(true);
      const parent = listRef?.current;
      cloneNodeRef.current = initHelper(parent, cloneNode, moveCurrent?.current);
    }
    if (!cloneNodeRef?.current) return;
    const { x, y } = pos.current;
    // const { left, top, width, height } = moveCurrent?.current.getBoundingClientRect();
    const mouseMove = {
      x: e.pageX - x,
      y: e.pageY - y,
    };
    const iframe = document.getElementById('iframe-wrr');
    if (Math.abs(mouseMove.x) > 10 || Math.abs(mouseMove.y) > 10) {
      const { left, top, width, height } = iframe.getBoundingClientRect();
      const cloneNodeReact = cloneNodeRef.current.getBoundingClientRect();

      const l = cloneNodeReact.left + cloneNodeReact.width;
      const t = cloneNodeReact.top + cloneNodeReact.height;
      if (
        l >= left &&
        l <= left + width + cloneNodeReact.width &&
        t >= top &&
        t <= top + height + cloneNodeReact.height
      ) {
        const postXY = {
          x: l - left,
          y: t - top,
        };
        if (l > left + width / 2 && l <= left + width + cloneNodeReact.width) {
          postXY.x = l - left - cloneNodeReact.width;
        }
        isEnter.current = true;
        postData.current = {
          ...postXY,
          isAdd: true,
          isRemove: true,
        };
        onDrag &&
          onDrag({
            ...postXY,
            addId: moveCurrent.current.dataset.id,
          });
        onDragEnter &&
          onDragEnter({
            ...postXY,
            addId: moveCurrent.current.dataset.id,
          });
      } else {
        isEnter.current = false;
        postData.current = {
          x: 0,
          y: 0,
          isRemove: true,
        };
        onDrag &&
          onDrag({
            ...postData.current,
            addId: moveCurrent.current.dataset.id,
          });
      }
      cloneNodeRef.current.style.transform = `translate3d(${mouseMove.x}px,${mouseMove.y}px,0)`;
    }
  };
  const mouseupListener = (e) => {
    if (!cloneNodeRef.current) return null;

    if (isEnter.current) {
      isEnter.current = false;
      onDragEnd &&
        onDragEnd({ ...postData.current, addId: moveCurrent.current.dataset.id, isRemove: true });
    } else {
      onDragOut &&
        onDragOut({ ...postData.current, addId: moveCurrent.current.dataset.id, isRemove: true });
    }
    onDragOver &&
      onDragOver({
        ...postData.current,
        isRemove: true,
        addId: moveCurrent.current.dataset.id,
      });
    if (cloneNodeRef.current) {
      cloneNodeRef.current.style.transform = `translate3d(0px,0px,0);`;
      cloneNodeRef.current.style = '';

      removeNode(cloneNodeRef.current);
      cloneNodeRef.current = null;
    }
    if (moveCurrent.current) {
      moveCurrent.current = null;
    }
  };
  useEffect(() => {
    document.addEventListener('mousedown', mousedownListener, false);
    document.addEventListener('mousemove', mousemoveListener, false);
    document.addEventListener('mouseup', mouseupListener, false);

    return () => {
      document.removeEventListener('mousedown', mousedownListener);
      document.removeEventListener('mousemove', mousemoveListener);
      document.removeEventListener('mouseup', mouseupListener);
    };
  }, []);
};

export default useDrag;
